<template>
  <div>
    <h1>训练会话</h1>
    <el-pagination
      :page-size="10"
      layout="prev, pager, next"
      :total="totalQuestions"
      @current-change="fetchQuestions"
    />
    <div v-for="question in questions" :key="question.id" class="question-item">
      <el-card>
        <div>{{ question.text }}</div>
        <div>分数: {{ question.score }}</div>
        <div>题型: {{ question.type }}</div>
        <el-button type="text" @click="viewQuestion(question.id)">查看详情</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
import { Pagination, Card } from 'element-ui'

export default {
  components: {
    'el-pagination': Pagination,
    'el-card': Card
  },
  data() {
    return {
      questions: [],
      totalQuestions: 0,
      currentPage: 1
    }
  },
  created() {
    this.fetchQuestions(this.currentPage)
  },
  methods: {
    async fetchQuestions(currentPage) {
      const { data } = await this.$axios.get(`/api/questions?page=${currentPage}`)
      this.questions = data.questions
      this.totalQuestions = data.total
    },
    viewQuestion(id) {
      this.$router.push(`/question/${id}`)
    }
  }
}
</script>
